<template>
  <div class="currency">
    <div class="header">
      <el-button :disabled="!bomCost('per:insertCurr')" size="mini" @click="newlys">{{ $t('btn.newHang') }}<!--新增行--></el-button>
    </div>
    <div class="table-content">
      <jc-table
        sortable
        :table-data="tableData"
        :table-header="tableHeard"
        :table-height="tableHeight"
      >
        <!--  币别名称  -->
        <template v-slot:billSlot="col">
          <el-input v-model="col.scope.row.fname" size="mini" />
        </template>
        <!--  币别编码  -->
        <template v-slot:tagSlot="col">
          <el-input v-model="col.scope.row.fnumber" size="mini" />
        </template>
        <!--  货币代码  -->
        <template v-slot:btnState="col">
          <el-input v-model="col.scope.row.fcode" size="mini" />
        </template>
        <!--  货币符号  -->
        <template v-slot:btnStates="col">
          <el-input v-model="col.scope.row.fsysmbol" size="mini" />
        </template>
        <!--  是否启用  -->
        <template v-slot:operaSlot="col">
          <el-radio-group v-model="col.scope.row.isDisable">
            <el-radio :label="0">{{ $t('market.yes') }}</el-radio>
            <el-radio :label="1">{{ $t('market.no') }}</el-radio>
          </el-radio-group>
        </template>
        <template v-slot:btnSlot="col">
          <el-button v-if="col.scope.row.fcurrencyId" type="warning" size="mini" @click="editCurr(col.scope.row)">{{ $t('btn.edit') }}</el-button>
          <el-button v-if="col.scope.row.fcurrencyId" type="danger" size="mini" @click="delCurr(col.scope.row)">{{ $t('shop.delete') }}</el-button>
          <el-button v-else type="primary" size="mini" @click="preserve(col.scope.row)">{{ $t('btn.save') }}</el-button>
        </template>
      </jc-table>
      <div class="footer">
        <jc-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="currentPage"
          :limit.sync="size"
          @pagination="queryCurrency"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryBaseCurrencyList,
  insertBaseCurrency,
  updateBaseCurrency,
  delBaseCurrency
} from '@/api/basicManagement/currencyRates'
export default {
  data() {
    return {
      tableData: [],
      tableHeard: [
        { label: this.$t('market.currency'), type: 'bill', prop: 'fname' },
        { label: this.$t('market.currnumber'), type: 'tag', prop: 'fnumber' },
        { label: this.$t('market.currcode'), type: 'state', prop: 'fcode' },
        { label: this.$t('market.currsysmbol'), type: 'states', prop: 'fsysmbol' },
        { label: this.$t('market.isDisable'), type: 'operate', prop: 'isDisable' },
        { label: this.$t('market.creator'), prop: 'fcreatorName' },
        { label: this.$t('market.createDate'), prop: 'fcreateDate' },
        { label: this.$t('market.lastmodifier'), prop: 'laupName' },
        { label: this.$t('market.lastmodifyDate'), prop: 'lauptime' },
        { label: this.$t('market.handle'), type: 'btn' }
      ],
      tableHeight: '79vh',
      total: 0,
      currentPage: 1,
      size: 20
    }
  },
  created() {
    this.queryCurrency()
  },
  methods: {
    queryCurrency() {
      const DATA = {
        pageNum: this.currentPage,
        pageSize: this.size
      }
      queryBaseCurrencyList(DATA).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list
          this.total = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 保存
    preserve(ev) {
      const DATA = {
        ...ev
      }
      insertBaseCurrency(DATA).then(res => {
        if (res.code === 0) {
          this.queryCurrency()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 修改
    editCurr(ev) {
      const DATA = {
        fcurrencyId: ev.fcurrencyId,
        fnumber: ev.fnumber,
        fname: ev.fname,
        fcode: ev.fcode,
        fsysmbol: ev.fsysmbol,
        isDisable: ev.isDisable
      }
      updateBaseCurrency(DATA).then(res => {
        if (res.code === 0) {
          this.queryCurrency()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 删除
    delCurr(ev) {
      const DATA = {
        fcurrencyId: ev.fcurrencyId
      }
      this.$confirm('确定要删除么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        delBaseCurrency(DATA).then(res => {
          if (res.code === 0) {
            this.queryCurrency()
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      })
    },
    // 新增行
    newlys() {
      this.tableData.push({
        fname: '',
        fnumber: '',
        fcode: '',
        fsysmbol: '',
        isDisable: 0
      })
    }
  }
}
</script>

<style scoped lang="scss">
.currency {
  @include listBom;
}
</style>
